<template>
    <div>
        <a-row>
            <a-col :span="12" style="position: relative">
                <h-section collapse style="padding: 0">
                    <template #title>
                        <span>交付需求</span>
                    </template>
                    <a-form layout="vertical" labelAlign="left">
                        <a-row>
                            <a-col :span="3">
                                <a-form-item label="需求规模" :span="24">
                                    <span class="font-w-b" style="font-size: 18px">{{ listA[0].storyPoints }}</span>
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="计划/上线需求数" :span="24">
                                    <span class="font-w-b">
                                        <span style="font-size: 18px">{{ listA[0].planProductCount }}</span>
                                        /{{ listA[0].onlineProductCount }}
                                    </span>
                                </a-form-item>
                            </a-col>
                            <a-col :span="5">
                                <a-form-item label="需求完成率" :span="24">
                                    <span class="font-w-b" style="font-size: 18px"> {{ $filters.valToPercentFilter(listA[0].completePercent) }}</span>
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="测试用例" :span="24">
                                    <div>
                                        <flexbox>
                                            <a-tag color="green" style="width: 80px">
                                                <flexbox justify="space-between">
                                                    <span>通过：</span>
                                                    <span> {{ listA[0].passTestCast }}</span>
                                                </flexbox>
                                            </a-tag>
                                            <DownOutlined style="color: #26a971" @click="isCollasped = !isCollasped" />
                                        </flexbox>
                                        <div v-if="isCollasped" style="display: flex; flex-direction: column">
                                            <a-tag color="red" style="margin-top: 8px; width: 80px">
                                                <flexbox justify="space-between">
                                                    <span>未通过：</span>
                                                    <span>{{ listA[0].failTestCast }}</span>
                                                </flexbox>
                                            </a-tag>
                                            <a-tag color="orange" style="margin-top: 8px; width: 80px">
                                                <flexbox justify="space-between">
                                                    <span>不可用：</span>
                                                    <span>{{ listA[0].naTestCast }}</span>
                                                </flexbox>
                                            </a-tag>
                                            <a-tag color="pink" style="margin-top: 8px; width: 80px">
                                                <flexbox justify="space-between">
                                                    <span>阻塞：</span>
                                                    <span>{{ listA[0].blockTestCast }}</span>
                                                </flexbox>
                                            </a-tag>
                                        </div>
                                    </div>
                                </a-form-item>
                            </a-col>
                            <a-col :span="4">
                                <a-form-item label="研发中bug数" :span="24">
                                    <span class="font-w-b" style="font-size: 18px">{{ listA[0].randdBugCount }}</span>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </h-section>
                <div style="position: absolute; top: 0; right: 24px; width: 1px; height: calc(100% + 32px); margin: -24px 0 -8px 0; background: #efefef"></div>
            </a-col>

            <a-col :span="12">
                <h-section collapse style="padding: 0; flex: 1" ref="versionSectionRef">
                    <template #title>
                        <span>交付成本</span>
                    </template>
                    <a-form layout="vertical" ref="ruleFormRef" labelAlign="left">
                        <a-row>
                            <a-col :span="6">
                                <a-form-item :span="24">
                                    <template #label>
                                        <span>开发人数</span>
                                        <EditOutlined class="margin-l-8 primary-color" v-if="detailData.stage === '2'" />
                                    </template>
                                    <a-input-number :min="1" style="width: 60px" @change="handleCalc('teamSize', listA[0], 0)" v-model:value="listA[0].teamSize" v-if="detailData.stage === '2'" />
                                    <span class="font-w-b" style="font-size: 18px" v-else>{{ listA[0].teamSize }}</span>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item :span="24">
                                    <template #label>
                                        <span>生产能力（h）</span>
                                        <EditOutlined class="margin-l-8 primary-color" v-if="detailData.stage === '2' && listA[0].teamSize" />
                                    </template>
                                    <div v-if="detailData.stage === '2' && listA[0].teamSize" v-clickOutSide="() => handleCalc('productionCapacity', listA[0], 0)">
                                        <a-input-number placeholder="输入工作日数量" style="width: 60px" :min="0" v-model:value="listA[0].productionDay" @change="handleInputChange($event, 'productionCapacity', listA[0], 0)" />
                                        <span class="margin-l-8">天*8h=</span>
                                        <span>{{ listA[0].productionCapacity }}</span>
                                    </div>
                                    <span class="font-w-b" style="font-size: 18px" v-else>{{ listA[0].productionCapacity }}</span>
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="实际有效生产时间(h)" :span="24">
                                    <span class="font-w-b" style="font-size: 18px"> {{ listA[0].effectiveProductionTime }}</span>
                                </a-form-item>
                            </a-col>
                            <a-col :span="4">
                                <a-form-item label="利用率" :span="24">
                                    <span class="font-w-b" style="font-size: 18px"> {{ $filters.valToPercentFilter(listA[0].usePercent) }}</span>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </h-section>
            </a-col>
        </a-row>

        <div style="width: calc(100% + 32px); margin: 8px -16px; height: 1px; background: #efefef"></div>

        <!-- <slot></slot>

        <div style="width: calc(100% + 32px); margin: 8px -16px; height: 1px; background: #efefef"></div> -->

        <h-section title="计划上线需求" collapse style="padding: 0">
            <custom-table ref="planRuleTableRef" :scroll="{ x: 1300 }" :rules="planTableRules" class="margin-t-16" bordered size="small" rowKey="id" :pagination="false" :columns="columnsB" :data-source="listB">
                <template #requireType="{ record }">
                    <h-product-type :type="$filters.valToNameFilter('requireType', record.requireType)" />
                </template>
                <template #status="{ record }">
                    <flexbox>
                        <h-status-badge :status="record.status" />
                    </flexbox>
                </template>
                <template #expectTime="{ text }">
                    {{ $filters.dateFilter(text) }}
                </template>
                <template #statisticsOpinion="{ record }">
                    <div v-if="!record.onlineTime">
                        <a-textarea :autoSize="{ minRows: 2, maxRows: 8 }" v-model:value="record.statisticsOpinion" placeholder="请输入限制200字以内" :maxlength="200" v-if="detailData.stage === '2'" />
                        <a-tooltip :title="record.statisticsOpinion" v-else>
                            <div v-html="record.statisticsOpinion" v-fitText />
                        </a-tooltip>
                    </div>
                </template>
            </custom-table>
        </h-section>

        <div style="width: calc(100% + 32px); margin: 8px -16px; height: 1px; background: #efefef"></div>

        <h-section title="实际上线需求" collapse style="padding: 0">
            <custom-table ref="onlineRuleTableRef" :scroll="{ x: 1300 }" :rules="onlineTableRules" class="margin-t-16" bordered size="small" rowKey="id" :pagination="false" :columns="columnsC" :data-source="listC">
                <template #requireType="{ record }">
                    <h-product-type :type="$filters.valToNameFilter('requireType', record.requireType)" />
                </template>
                <template #status="{ record }">
                    <flexbox>
                        <h-status-badge :status="record.status" />
                    </flexbox>
                </template>
                <template #expectTime="{ text }">
                    {{ $filters.dateFilter(text) }}
                </template>
                <template #versionOnlineTime>
                    {{ $filters.dateFilter(detail.pmpRequireTrackTimeDTO?.versionOnlineRealTime) }}
                </template>
                <template #riskCount="{ text, record }">
                    <flexbox>
                        <a-tag color="orange" v-if="text > 0">{{ text }}项风险</a-tag>
                        <router-link :to="{ path: '/energyManage/riskAnalysis', query: { id: record.id } }">详情</router-link>
                    </flexbox>
                </template>
                <template #statisticsOpinion="{ record }">
                    <div v-if="onlineStatus === '2'">
                        <a-textarea v-model:value="record.statisticsOpinion" placeholder="请输入限制200字以内" :maxlength="200" :autoSize="{ minRows: 2, maxRows: 8 }" v-if="detailData.stage === '2'" />
                        <a-tooltip :title="record.statisticsOpinion" v-else>
                            <div v-html="record.statisticsOpinion" v-fitText />
                        </a-tooltip>
                    </div>
                </template>
            </custom-table>
        </h-section>
    </div>
</template>

<script lang="ts">
import { detailZiyanData } from '@/views/energyManage/versionReportHistory/config/columns';
const { columnsB, columnsC } = detailZiyanData;
import { HStatusBadge, CustomTable, HProductType } from '@/components';
import { QuestionCircleOutlined, DownOutlined, EditOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, unref, reactive, toRefs, watch } from 'vue';
import { deepClone } from '@/utils/util';
export default defineComponent({
    components: {
        HStatusBadge,
        CustomTable,
        QuestionCircleOutlined,
        DownOutlined,
        EditOutlined,
        HProductType
    },
    props: {
        detail: {
            type: Object,
            default: () => ({})
        },
        onlineStatus: {
            type: String,
            default: ''
        }
    },
    setup(props) {
        const state = reactive<any>({
            detailData: {},
            listA: [],
            listB: [],
            listC: [],
            productionCapacityEditIndex: -1,
            isCollasped: false
        });
        const versionSectionRef = ref<any>();
        const onlineRuleTableRef = ref<any>();
        const validateOnline = (rule: any, value: any, rowIndex) => {
            if (props.onlineStatus === '2') {
                return value ? Promise.resolve() : Promise.reject('及时性说明不能为空');
            } else {
                return Promise.resolve();
            }
        };
        const onlineTableRules = {
            statisticsOpinion: [{ validator: validateOnline, message: '及时性说明不能为空' }]
        };
        const validate = async () => {
            let res = true;
            if (state.detailData.stage === '2') {
                const arr = await Promise.all([unref(planRuleTableRef).validate(), unref(onlineRuleTableRef).validate()]);
                res = arr.every((item) => item);
                // 滚动到提示位置
                if (!arr[0]) {
                    unref(versionSectionRef).$el.scrollIntoView({
                        block: 'start',
                        behavior: 'smooth'
                    });
                }
            }
            return res;
        };

        const planRuleTableRef = ref<any>();
        const validatePlan = (rule: any, value: any, rowIndex) => {
            if (!state.listB[rowIndex].onlineTime) {
                return value ? Promise.resolve() : Promise.reject('未完成原因不能为空');
            } else {
                return Promise.resolve();
            }
        };
        const planTableRules = {
            statisticsOpinion: [{ validator: validatePlan, message: '未完成原因不能为空' }]
        };

        const handleCalc = (type, record, index) => {
            if (type === 'productionCapacity') {
                state.listA[index].productionCapacity = record.productionDay * record.teamSize * 8;
                state.productionCapacityEditIndex = -1;
            }
            if (type === 'teamSize') {
                state.listA[index].productionCapacity = record.teamSize ? record.productionDay * record.teamSize * 8 : 0;
            }
            state.listA[index].usePercent = state.listA[index].productionCapacity ? (state.listA[index].effectiveProductionTime / state.listA[index].productionCapacity).toFixed(2) : 0;
        };
        const handleInputChange = (val, type, record, index) => {
            handleCalc(type, record, index);
        };
        watch(
            () => props.detail,
            (n) => {
                state.detailData = deepClone(n);
                state.detailData.usePercent = state.detailData.productionCapacity ? (state.detailData.effectiveProductionTime / state.detailData.productionCapacity).toFixed(2) : 0;
                state.detailData.productionDay = state.detailData.productionCapacity ? state.detailData.productionCapacity / state.detailData.teamSize / 8 : 0;
                state.listA = [state.detailData];
                state.listB = state.detailData.planProductRequireDTOS ? [...state.detailData.planProductRequireDTOS] : [];
                state.listC = state.detailData.onlineProductRequireDTOS ? [...state.detailData.onlineProductRequireDTOS] : [];
            },
            { immediate: true }
        );
        return {
            columnsB,
            columnsC,
            versionSectionRef,
            onlineRuleTableRef,
            onlineTableRules,
            planRuleTableRef,
            validatePlan,
            planTableRules,
            ...toRefs(state),
            validate,
            handleCalc,
            handleInputChange
        };
    }
});
</script>

<style scoped lang="less">
::v-deep(.ant-form-item-label) {
    min-width: 0;
}
::v-deep(.ant-form-vertical .ant-form-item-label > label) {
    margin-bottom: 0 !important;
}
</style>